<ion-content>
  <ion-list>
    <ion-item>
      <ion-icon name="musical-notes-outline" slot="start"></ion-icon>
      <ion-label>本地音乐<ion-text color="medium" class="sum-size">(98)</ion-text>
      </ion-label>
    </ion-item>
    <ion-item>
      <ion-icon name="timer-outline" slot="start"></ion-icon>
      <ion-label>最近播放<ion-text color="medium" class="sum-size">(156)</ion-text>
      </ion-label>
    </ion-item>
    <ion-item>
      <ion-icon name="arrow-down-circle-outline" slot="start"></ion-icon>
      <ion-label>下载管理<ion-text color="medium" class="sum-size">(23)</ion-text>
      </ion-label>
    </ion-item>
    <ion-item>
      <ion-icon name="easel-outline" slot="start"></ion-icon>
      <ion-label>我的电台<ion-text color="medium" class="sum-size">(2)</ion-text>
      </ion-label>
    </ion-item>
    <ion-item>
      <ion-icon name="star-outline" slot="start"></ion-icon>
      <ion-label>我的收藏<ion-text color="medium" class="sum-size">(45)</ion-text>
      </ion-label>
    </ion-item>
  </ion-list>
  <ion-accordion-group value="create">
    <ion-accordion value="create" toggle-icon-slot="start">
      <ion-item slot="header">
        <ion-label>创建的歌单</ion-label>
      </ion-item>
      <ion-grid slot="content">
        <ion-row>
          <ion-col size="4">歌单</ion-col>
          <ion-col size="4">歌单</ion-col>
          <ion-col size="4">歌单</ion-col>
        </ion-row>

      </ion-grid>

    </ion-accordion>
  </ion-accordion-group>
  <ion-accordion-group value="collect">
    <ion-accordion value="collect" toggle-icon-slot="start">
      <ion-item slot="header">
        <ion-label>收藏的歌单</ion-label>
      </ion-item>
      <ion-list slot="content">
        <ion-item>
          <ion-avatar slot="start">
            <img src="./avatar-finn.png" />
          </ion-avatar>
          <ion-label>
            <h2>I'm a big deal</h2>
            <h3>Listen, I've had a pretty messed up day...</h3>
          </ion-label>
          <ion-icon slot="end" name="ellipsis-vertical-outline"></ion-icon>
        </ion-item>
        <ion-item>
          <ion-avatar slot="start">
            <img src="./avatar-finn.png" />
          </ion-avatar>
          <ion-label>
            <h2>I'm a big deal</h2>
            <h3>Listen, I've had a pretty messed up day...</h3>
          </ion-label>
          <ion-icon slot="end" name="ellipsis-vertical-outline"></ion-icon>
        </ion-item>
        <ion-item>
          <ion-avatar slot="start">
            <img src="./avatar-finn.png" />
          </ion-avatar>
          <ion-label>
            <h2>I'm a big deal</h2>
            <h3>Listen, I've had a pretty messed up day...</h3>
          </ion-label>
          <ion-icon slot="end" name="ellipsis-vertical-outline"></ion-icon>
        </ion-item>
      </ion-list>
    </ion-accordion>
  </ion-accordion-group>

</ion-content>